<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="8">
        <el-tree
          :data="data"
          :props="{
            children: 'children',
            label: 'label'
          }"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="16">
        <el-table
          v-loading="loadingData"
          :data="list"
          element-loading-text="Loading"
          fit
          highlight-current-row
          row-key="id"
          @sort-change="appendSorterParam"
          @selection-change="handleSelectionChange"
          @current-change="currentChange"
        >
          <el-table-column align="center" label="库位编号">
            <template slot-scope="scope">
              <span>{{ scope.row.label }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="货架编号">
            <template slot-scope="scope">
              <span>{{ scope.row.warehouseShelvesShelfName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="行">
            <template slot-scope="scope">
              <span>{{ scope.row.col }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="列">
            <template slot-scope="scope">
              <span>{{ scope.row.line }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pagination.total > 0"
          :total="pagination.total"
          :page.sync="pagination.current"
          :limit.sync="pagination.pageSize"
          :style="{ textAlign: 'right' }"
          @pagination="handlePaginationChanged"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import list from '@/components/diboot/mixins/list'
import { dibootApi } from '@/utils/request'

export default {
  name: 'WarehouseLocation',
  components: {
  },
  mixins: [list],
  data() {
    return {
      baseApi: '/warehouse/lattice',
      currentNodeId: 0,
      selectedRowKeys: [],
      selectRowInfo: {},
      data: []
    }
  },
  created() {
    this.getTreeList()
  },
  mounted() {
    this.getTreeList()
  },
  methods: {
    getTreeList() {
      dibootApi
        .get('/warehouse/getTreeWarehouse')
        .then(res => {
          for (const warehouse of res.data) {
            warehouse.label = warehouse.warehouseName
            warehouse.children = warehouse.areaListVOS
            for (const area of warehouse.children) {
              area.label = area.areaName
              area.children = area.shelves
              for (const shelves of area.shelves) {
                shelves.label = shelves.shelfName
              }
            }
          }
          this.data = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleNodeClick(val) {
      val.shelfName && this.getSelectData(val.id)
    },
    getSelectData(id) {
      dibootApi
        .get(`/warehouse/lattice/${id}`)
        .then(res => {
          if (res.ok) {
            console.log(res.data.resultList.flat(2))
            this.list = res.data.resultList.flat(2)
          } else {
            this.list = []
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSelectionChange(val) {
      this.selectedRowKeys = val.map(item => {
        return item.id
      })
      this.$emit('selectedRowKeys', this.selectedRowKeys)
    },
    currentChange(val) {
      this.selectRowInfo = val
    }
  }
}
</script>
<style lang="less" scoped></style>
